<template>
    <div class="box">
        <h1 style="text-align: center;">用户列表</h1>
        <el-button type="primary" @click="$router.push('/user/add')"
            v-permission="{ path: '/user/add', name: '用户添加' }">添加用户</el-button>
        <el-table :data="userList" height="250" border style="width: 100%">
            <el-table-column prop="username" label="用户名">
            </el-table-column>
            <el-table-column prop="email" label="邮箱">
            </el-table-column>
            <el-table-column prop="tel" label="手机号">
            </el-table-column>
            <el-table-column label="角色" width="100">
                <template slot-scope="scope">
                    <span>{{ scope.row.role ? scope.row.role.name : '前台用户' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="启用" width="70">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ff4949"
                        @change="onChange(scope.row._id)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="注册时间">
                <template slot-scope="scope">
                    {{ scope.row.createdAt | time }}
                </template>
            </el-table-column>
            <el-table-column label="修改时间">
                <template slot-scope="scope">
                    {{ scope.row.updatedAt | time }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" v-permission="{ path: '/user/edit', name: '用户修改' }"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" v-permission="{ path: '/user/fel', name: '用户删除' }"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑用户的弹窗 -->
        <el-dialog title="用户编辑" :visible.sync="dialogVisible" width="30%">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密  码">
                    <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮  箱">
                    <el-input v-model="form.email" type="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="form.tel" type="tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="form.enable" active-color="#13ce66" inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="用户权限">
                    <el-select v-model="form.role" placeholder="请选择角色">
                        <el-option v-for="role in roles" :key="role._id" :label="role.name" :value="role._id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit(onEdit)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { userList, changeEnable, userEdit, roleList, userDel } from '@/request'
import moment from 'moment'
import permission from '@/utils/permission'

export default {
    directives: {
        permission
    },
    data() {
        return {
            userList: [
                {
                    role: {
                        name: ''
                    }
                }
            ],
            dialogVisible: false,
            form: {
                username: '',
                password: '',
                email: '',
                tel: '',
                enable: false,
                role: ''
            },
            roles: []
        }
    },
    methods: {
        handleEdit(index, row) {
            // console.log(row);
            this.dialogVisible = true
            row.password = ''
            this.form = row
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                userDel(row._id).then(res => {
                    if (res.error_code === 200) {
                        this.$message({
                            type: 'success',
                            duration: 1500,
                            message: res.msg,
                            onClose: () => {
                                this.getUserList()
                            }
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            duration: 1500,
                            message: res.msg
                        })
                    }
                })
            })

        },
        async getUserList() {
            let data = await userList()
            // console.log(data);
            if (data.error_code === 200) {
                this.userList = data.data
            }
            // console.log(this.userList);
            let index = this.userList.findIndex(item => {
                if(item.role){
                    // console.log(item.role.name);
                    return item.role.name === '超级'
                }
            })
            this.userList.splice(index, 1)
        },
        async getRoles() {
            let data = await roleList()
            this.roles = data.data.rolelist
            // console.log(this.roles);
        },
        async onChange(id) {
            let data = await changeEnable(id)
            let { error_code, msg } = data
            if (error_code === 200) {
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg
                })
            }
        },
        async onEdit() {
            console.log(this.form);
            let data = await userEdit(this.form)
            if (data.error_code === 200) {
                this.$message({
                    message: data.msg,
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.dialogVisible = false
                        this.getUserList()
                    }
                });
            } else {
                this.$message({
                    message: data.msg,
                    type: 'error'
                })
            }
        },
        onSubmit(done) {
            this.$confirm('确认修改？')
                .then(res => {
                    done()
                })
        },
    },
    created() {
        this.getUserList()
        this.getRoles()
    },
    filters: {
        time(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss')
        }
    }
}
</script>

<style>
.el-table,
.box {
    height: 90% !important
}
</style>
